<template>
  <div ref="table">123</div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: 123
    }
  },

  //创建了实例，但是数据还没有初始化
  beforeCreate() {
    // data数据还没有初始化完成, 此时vue实例上还没有绑定数据
    console.log('beforeCreate', this.msg) //undefined
  },
  // // 至少从created开始，才能操作this.xxx数据 => 发请求获取新数据修改默认数据至少要等到created
  created() {
    // data数据初始化完成, 此时vue实例上绑定好数据了
    console.log('created', this.msg)

    this.msg = '后台的数据'

    //在创建阶段还拿不到dom
    console.log(this.$refs.table)

    this.timeId = setInterval(() => {
      console.log('嘎嘎噶，我是卖报小行家~')
    }, 1000)
  },
  beforeMount() {
    console.log('created', this.msg)
    // beforeMount：页面结构还没有解析渲染完成，此时无法获取到dom

    console.log('beforeMount', this.$refs.table)
  },
  mounted() {
    // mounted: 页面结构已经解析渲染完成，此时可以获取到dom
    console.log('mounted', this.$refs.table)
  },
  beforeUpdate() {
    console.log(
      'beforeUpdate',
      'dom更新前',
      this.msg,
      this.$refs.table.innerHTML
    )
  },
  updated() {
    console.log(
      'beforeUpdate',
      'dom更新后',
      this.msg,
      this.$refs.table.innerHTML
    )
  },
  beforeDestroy() {
    console.log('beforeDestroy', '实例销毁，资源释放前')
    clearInterval(this.timeId)
    console.log(this.msg)
    console.log(this.$refs.table)
  },
  destroyed() {
    console.log('destroyed', '实例销毁，资源释放后')
  }
}
</script>

<style scoped>
</style>